{% extends "base.html" %}

{% block title %}{{ SITENAME }} — Map{% endblock %}

{% block head %}
  {{ super() }}

  <meta name="description" content="Map of the Alchorisma publication" />
  <link rel="stylesheet" href="/theme/css/map.css">

  <script src="/theme/js/map-visited.js"></script>

{% endblock %}

{% block navleft %}
  {{ super() }}
{% endblock navleft %}

{% block body %}
  {{ super() }}

<header>
  <h1>Points of interest</h1>
  <p>An overview of the points of interest within the publication.</p>
  <nav class="button-nav">
    <a class="vines-button" href="/">entrance</a>
    <a class="vines-button" id="roots-button" href="/roots/about-alchorisma.html">roots of Alchorisma</a>
  </nav>
</header>

<nav id="map">

  <ul>
  {% for article in articles %}

    {% if article.category != "roots" %}
    <li class="article-cart-wrapper">

      <div class="article-cart {{ article.category }}" id="{{ article.slug }}">

        <a class="map-link" href="{{ SITEURL }}/{{ article.url }}"></a>

        <details>
          <summary>
            {% if article.category %}
            <div class="{{ article.category }} category">
              {{ article.category }}
            </div>
            {% endif %}
            <h2>{{ article.title }}</h2>
            <address class="author">By {{ article.authors|join(', ') }}</address>
          </summary>
          <main>
            {{ article.summary }}
          </main>
        </details>

      </div>

    </li>
    {% endif %}

  {% endfor %}
  </ul>

</nav>

{% endblock body %}